<template>
  <div class="modal" id="exampleModal" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">New project</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Name</label>
            <!--                    <a-input v-model:value="projectName" class="form-control" placeholder="项目名称" allow-clear show-count :maxlength="20" />-->
            <input type="text" class="form-control" name="name" placeholder="Your project name"
                   v-model="projectName"/>
          </div>
          <!--                  <label class="form-label">Report type</label>-->
          <!--                  <div class="form-selectgroup-boxes row mb-3">-->
          <!--                    <div class="col-md-6">-->
          <!--                      <label class="form-selectgroup-item">-->
          <!--                        <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked />-->
          <!--                        <span class="form-selectgroup-label d-flex align-items-center p-3">-->
          <!--                <span class="me-3">-->
          <!--                  <span class="form-selectgroup-check"></span>-->
          <!--                </span>-->
          <!--                <span class="form-selectgroup-label-content">-->
          <!--                  <span class="form-selectgroup-title strong mb-1">Simple</span>-->
          <!--                  <span class="d-block text-secondary">Provide only basic data needed for the report</span>-->
          <!--                </span>-->
          <!--              </span>-->
          <!--                      </label>-->
          <!--                    </div>-->
          <!--                    <div class="col-md-6">-->
          <!--                      <label class="form-selectgroup-item">-->
          <!--                        <input type="radio" name="report-type" value="1" class="form-selectgroup-input" />-->
          <!--                        <span class="form-selectgroup-label d-flex align-items-center p-3">-->
          <!--                <span class="me-3">-->
          <!--                  <span class="form-selectgroup-check"></span>-->
          <!--                </span>-->
          <!--                <span class="form-selectgroup-label-content">-->
          <!--                  <span class="form-selectgroup-title strong mb-1">Advanced</span>-->
          <!--                  <span class="d-block text-secondary">Insert charts and additional advanced analyses to be inserted in the report</span>-->
          <!--                </span>-->
          <!--              </span>-->
          <!--                      </label>-->
          <!--                    </div>-->
          <!--                  </div>-->
          <div class="row">
            <!--                    <div class="col-lg-8">-->
            <!--                      <div class="mb-3">-->
            <!--                        <label class="form-label">Report url</label>-->
            <!--                        <div class="input-group input-group-flat">-->
            <!--                <span class="input-group-text">-->
            <!--                  https://tabler.io/reports/-->
            <!--                </span>-->
            <!--                          <input type="text" class="form-control ps-0" value="report-01" autocomplete="off" />-->
            <!--                        </div>-->
            <!--                      </div>-->
            <!--                    </div>-->
            <div class="col-lg-4">
              <div class="mb-3">
                <label class="form-label">Visibility</label>
                <select class="form-select">
                  <option value="1" selected>Public</option>
                  <option value="2">Private</option>
                  <!--                          <option value="3">Hidden</option>-->
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <!--                    <div class="col-lg-6">-->
            <!--                      <div class="mb-3">-->
            <!--                        <label class="form-label">Client name</label>-->
            <!--                        <input type="text" class="form-control" />-->
            <!--                      </div>-->
            <!--                    </div>-->
            <!--                    <div class="col-lg-6">-->
            <!--                      <div class="mb-3">-->
            <!--                        <label class="form-label">Reporting period</label>-->
            <!--                        <input type="date" class="form-control" />-->
            <!--                      </div>-->
            <!--                    </div>-->
            <div class="col-lg-12">
              <div>
                <label class="form-label">Additional information</label>
                <textarea class="form-control" rows="3" v-model="projectRemark"/>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-link link-secondary" data-bs-dismiss="modal" @click="projectFormClear">Cancel
          </button>
          <button class="btn btn-info ms-auto" data-bs-dismiss="modal" @click="projectAdd">
            Create new project
          </button>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {addProj} from "@/api/project.js";

export default {
  name: "ProjectPrompt",
  data(){
    return {
      projectName: null,
      projectRemark: null,
    }
  },
  methods:{
    projectFormClear() {
      this.projectName = null
      this.projectRemark = null
    },
    async projectAdd() {
      this.confirmLoading = true
      let result = await addProj({'name': this.projectName, 'remark': this.projectRemark}).then(res => {
        const {data} = res
        if (data.code === 200) {
          layer.msg('新增成功')
          this.confirmLoading = false
          console.log('data', data)
          this.open = false
          window.location.reload()
        } else {
          layer.msg(data.data)
          this.open = false
          this.confirmLoading = false
        }
      }).catch(e => {
        layer.msg('e>>' + e + 'retry again')
        this.open = false
        this.confirmLoading = false
      })
      if (result) {
        console.log('result ', result)
      }
    },
  }
}
</script>

<style scoped>

</style>
